<template>
	<view>
		<view class="toplogin">
			<view class="toplogin-l">
				<image :src="avatar" mode="aspectFit" class="headimg"></image>
				<view class="toplogin-l-txt" @click="showPopup">{{username}}</view>
			</view>
			<view class="toplogin-r">
				<u-icon :name="token?'close':'arrow-right'" size="40rpx" @click="onIconFn"></u-icon>
			</view>
		</view>
		<!-- 登录框 -->
		<u-popup v-model="show" mode="center" width="700rpx" height="450rpx">
			<view class="login">
				<!-- 表单  ref="uForm"-->
				<u-form :model="form" ref="uForm">
					<u-form-item label="用户名" prop="name" label-width="120rpx" label-align="center">
						<u-input v-model="form.name" placeholder="请输入用户名" />
					</u-form-item>
					<u-form-item label="密码" prop="password" label-width="120rpx" label-align="center">
						<u-input v-model="form.password" type="password" placeholder="请输入密码" />
					</u-form-item>
				</u-form>
				<u-button class="btn" @click="submit">登录/注册</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		goBackAfterLogin
	} from "../../util/router.js"
	export default {
		data() {
			return {
				// 登录框状态
				show: false,
				// 头像
				avatar: "/static/111.jpg",
				// 用户名
				username: "点击登录",
				token: "",
				// 表单信息
				form: {
					name: '',
					password: '',
				},
				// 表单验证信息
				rules: {
					name: [{
						// 必填
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						// blur 失焦
						// change 改变
						trigger: ['change', 'blur'],
					}],
					password: [{
						// 必填
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				}
			};
		},
		onShow() {
			// 每次进来判断有没有token,获取用户信息
			let token = uni.getStorageSync('token')
			let userInfo = uni.getStorageSync('userInfo')
			// console.log(token, userInfo);
			if (token && userInfo) {
				this.avatar = "/static/222.jpg"
				this.username = userInfo.username
				this.token = token
			}
		},
		methods: {
			// 显示登录框
			showPopup() {
				// 有token的时候才是登录
				let token = uni.getStorageSync('token')
				let userInfo = uni.getStorageSync('userInfo')
				// console.log(token, userInfo);
				if (token && userInfo) {
					return
				}
				this.show = true
				// 没有nextTick的话,可能获取不到DOM元素

				// nextTick在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,可以保证获取到更新完之后的DOM
				// 报错Cannot read properties of undefined (reading 'setRules')" 无法读取未定义的属性（读取“setRules
				this.$nextTick(() => {
					this.$refs.uForm.setRules(this.rules);
				})
			},
			// 点击登录按钮的逻辑
			submit() {
				this.$refs.uForm.validate(valid => {
					// console.log(valid);
					if (valid) {
						this.$request({
							url: "/auth/loginByWeb",
							method: "POST",
							data: {
								username: this.form.name,
								pwd: this.form.password
							},
							successCb: res => {
								let {
									userInfo,
									token
								} = res
								console.log(token, userInfo);
								uni.setStorageSync("token", token)
								uni.setStorageSync("userInfo", userInfo)
								this.show = false
								this.avatar = "/static/222.jpg"
								this.username = userInfo.username
								this.token = token


								// 如果是未登录状态下,从购物车页面跳转到这个页面的,那么登录后去找往回跳转的路径,如果找得到,那么就跳转到那个页面
								goBackAfterLogin()
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			// 点击退出图标
			onIconFn() {
				let token = uni.getStorageSync('token')
				let userInfo = uni.getStorageSync('userInfo')
				// console.log(token, userInfo);
				if (token && userInfo) {
					uni.showModal({
						title: '提示',
						content: '确认退出登录吗',
						success: (res) => {
							if (res.confirm) {
								// console.log('用户点击确定');
								uni.clearStorageSync()
								this.avatar = "/static/111.jpg"
								this.username = '点击登录'
								this.token = ''
							}
						}
					});
				} else {
					this.show = true
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.toplogin {
		width: 100%;
		background-color: #333;
		height: 200rpx;
		color: #fefeff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 35rpx;
		font-family: '黑体';

		.toplogin-l {
			display: flex;
			align-items: center;
		}

		.toplogin-r {
			margin-right: 20rpx;
		}

		.headimg {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			margin: 0 20rpx;
		}
	}

	.login {
		padding: 50rpx;

		.btn {
			background-color: #ee0a24;
			color: #fff;
			border-radius: 50rpx;
			width: 600rpx;
			height: 90rpx;
		}
	}
</style>
